{%- liquid
  assign articles_limit = section.settings.desktop_articles_first_line | plus: 0
  if current_page == 1 and articles_limit < 3
    assign articles_offset = articles_limit
    assign hightlight_blog = true
  else
    assign articles_offset = 0
    assign hightlight_blog = false
  endif

  if current_page == 1
    if articles_limit == 2
      assign article_list_margin = 'mb-6 mt-3 my-md-4'
    else
      assign article_list_margin = 'my-6 my-md-7'
    endif
  else
    assign article_list_margin = 'my-6 my-md-7'
  endif
-%}
{%- paginate blog.articles by section.settings.products_per_page -%}

<div data-blog="{{ blog.articles }}">
  <div class="container mt-6 mt-md-9"> 
    <h1 class="mb-3 mb-md-4">{{ blog.title | escape }}</h1>
    {% assign current_url = request.path %}
    {% if section.settings.show_tag_navigation == true %}
    {% comment %}标签 {% endcomment %}
    <div class="mt-n2 blog-tab-list">
      <a {% if blog.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ blog.url }}" class="blog-tab-item p-0 me-4 mt-2 lead {% if current_url == blog.url %} fw-bold btn-link-underline-color {% else %} fw-normal btn-link-underline-height{% endif %}">{{ 'blogs.article.tag_all' | t }}</a>
      {% for tag in blog.all_tags %}
      {% assign tag_text =  tag | handle %}
      {% assign blog_url_tag = blog.url | append: '/tagged/' | append: tag_text %}
      <a {% if blog.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ blog.url }}/tagged/{{ tag | handle }}" class="blog-tab-item p-0 me-4 mt-2 lead {% if current_url == blog_url_tag %} fw-bold btn-link-underline-color {% else %} fw-normal btn-link-underline-height{% endif %}" data-bs-target="#panelsStayOpen-{{tag}}">{{tag}}</a>
      {% endfor %}
    </div>
    {% endif %}
    
    {%- if blog.articles != blank -%}
      {%- if hightlight_blog -%}
        {%- comment -%}第一页高亮处理第一篇或第一、二篇文章{%- endcomment -%}
        {%- if current_page == 1 -%}
          {%- if articles_limit == 1 -%}
            {% comment %} 获取最新的博客卡片，用于大屏显示 {% endcomment %} 
            {%- for article in blog.articles limit: articles_limit -%}
              {%- render 'article-card-latest', article: article, show_image: section.settings.show_image -%}
            {%- endfor -%}
          {%- else -%}
            <div class="mt-6 mt-md-7">
              <div class="row gx-4 gy-3 gy-md-6">
                {%- for article in blog.articles limit: articles_limit -%}
                  {%- if forloop.index == 1 -%}
                    <div class="col-md-8">
                      {%- render 'article-card-with-text-overlay', 
                        article: article, 
                        show_image: section.settings.show_image, 
                        column: 2 -%}
                    </div>
                  {%- else -%}
                    <div class="col-md-4">
                      {%- render 'article-card-with-text-overlay', 
                        article: article, 
                        show_image: section.settings.show_image,
                        column: 1 -%}
                    </div>
                  {%- endif -%}
                {%- endfor -%}
              </div>
            </div>
          {%- endif -%}
        {%- endif -%}
      {%- endif -%}
      
      <div class="{{ article_list_margin }}">
        <div class="row gx-md-7 gy-6 gy-md-7 row-cols-1 row-cols-md-3">
          {%- for article in blog.articles offset: articles_offset -%}
            {%- render 'article-card', article: article, show_image: section.settings.show_image -%}
          {% endfor %}
        </div>
      </div>
    {%- else -%}
      {%- comment -%}没有博客文章{%- endcomment -%}
      <div class="text-center h-md-8 h-6 position-relative">
        <div class="position-horizontal-vertical-center w-100">
          <h6 class="h2">{{ 'blogs.article.no_articles' | t }}</h6>
        </div>
      </div>
    {%- endif -%}
    
    {%- if paginate.pages > 1 -%}
      <div class="mb-6 mb-md-7">
        {%- render 'pagination', paginate: paginate -%}
      </div>
    {%- endif -%}
  </div>
</div>
{%- endpaginate -%}
{% render 'structured-blog' %}
{% schema %}
{
  "name": "Blog",
  "tag": "section",
  "class": "main-blog",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_image",
      "label": "Show featured image",
      "default": true,
      "info": "For best results, use an image with a X:X aspect ratio."
    },
    {
      "type": "range",
      "id": "products_per_page",
      "label": "Posts per page",
      "min": 4,
      "max": 30,
      "step": 1,
      "default": 16
    },
    {
      "type": "checkbox",
      "id": "show_tag_navigation",
      "label": "Show tag navigation",
      "default": false
    },
    {
      "type": "radio",
      "id": "desktop_articles_first_line",
      "label": "Desktop articles first line",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "title",
      "name": "t:sections.main-blog.blocks.title.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_date",
          "default": true,
          "label": "Show date"
        },
        {
          "type": "checkbox",
          "id": "show_author",
          "default": true,
          "label": "Show author"
        },
        {
          "type": "checkbox",
          "id": "show_tags",
          "default": false,
          "label": "Show tags"
        }
      ]
    },
    {
      "type": "summary",
      "name": "Excerpt",
      "limit": 1
    },
    {
      "type": "link",
      "name": "Link",
      "limit": 1
    }
  ]
}
{% endschema %}
